<template>
  <div class="tool-json">
    <div class="tool-json-text">
      <el-input
          v-model="jsonText"
          :rows="8"
          type="textarea"
          placeholder="请输入json内容"/>
    </div>
    <div class="tool-json-msg" v-if="errorMsg != ''">
      <span style="color: red;">{{ errorMsg }}</span>
    </div>
    <div class="tool-json-fomat">
      <json-viewer :value="jsonData" copyable boxed sort />
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive, computed} from 'vue'
import {useRoute, useRouter} from "vue-router";

const route = useRoute()
const jsonText = ref('')
const errorMsg = ref('')

// let jsonData = reactive({});
const jsonData = computed(()=>{
  let obj = {}//计算属性传递参数
  if (jsonText.value.trim() == '') {
    errorMsg.value = ''
    return {}
  } else {
    try {
      obj = JSON.parse(jsonText.value)
      errorMsg.value = ''
    } catch (err) {
      errorMsg.value = err.message
    }
    return obj
  }
})

onMounted(() => {
  let jsonStr = route.query.jsonStr
  if (jsonStr != null && jsonStr.length > 0) {
    if (typeof jsonStr === "string") {
      jsonText.value = jsonStr
    }
  }
})

</script>
<style scoped lang="scss">
.tool-json {
  height: calc(100vh - 36px);
  padding: 10px;
  overflow-y: auto;

  .tool-json-text {

  }

  .tool-json-msg {
    padding: 10px 5px;
  }

  .tool-json-fomat {
    margin: 25px 0;
  }
}
</style>